<template>
  <div class="reserve-plan">
    <el-card>
      <div class="reserve-group">
        <div class="plan-title">“{{ plan.taskName }}”</div>
        <h5>目标：{{ plan.taskTarget }}</h5>
        <p v-show="open" class="des">描述： {{ plan.problemDescription }}</p>
        <el-button v-show="!open" icon="el-icon-arrow-down" type="primary" @click="showMore">更多</el-button>
        <el-button v-show="open" icon="el-icon-arrow-up" type="primary" @click="showMore">收起</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    plan: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      open: false
    }
  },
  methods: {
    showMore() {
      this.open = !this.open
    }
  }
}
</script>
<style lang="scss" scoped>
.plan-title{
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.des{
  font-size: 14px;
  color: #666;
}
</style>
